<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>美团</title>
    <!-- 基础样式 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 通用样式 -->
    <link rel="stylesheet" href="./css/common.css" />
    <!-- 首页样式 -->
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./fonticon/iconfont.css" />
    <script type="module" src="./js/index.js"></script>
  </head>
  <body>
    <!-- 顶部导航 -->
    <div class="nav-top">
      <div class="nav-top-main">
        <div class="nav-top-left">
          <i class="iconfont icon-dingwei"></i>
          <span>北京</span>
          <a href="#">切换城市</a>
          <!-- <a href="#" class="nav-top-username">CpU268646316</a> -->
          <!-- <a href="#">退出</a> -->
          <a href="./view/register.html" class="nav-top-username">注册</a>
          <a href="./view/login.html">立即登录</a>
        </div>
        <div class="nav-top-right">
          <a href="#">手机APP</a>
          <a href="#">我的美团</a>
        </div>
      </div>
    </div>

    <div class="search">
      <div class="search-center">
        <!-- logo区域 -->
        <div class="search-center-left">
          <a href="" title="美团购">
            <img src="./images/logo.png" />
          </a>
        </div>
        <!-- 搜索区域 -->
        <div class="search-center-center">
          <input type="text" placeholder="搜索商家或地点" />
          <button>
            <span class="iconfont icon-sousuo"></span>
          </button>
        </div>
        <div class="search-center-bottom">
          <a href="#">美团外卖</a>
          <a href="./view/maoyan/maoyan.html" target="_blank">猫眼电影</a>
          <a href="#">美团酒店</a>
          <a href="./view/minsu/mingshu.html" target="_blank">民宿 &frasl; 公寓</a>
          <a href="./view/shangjia/商家/shangjia.html" target="_blank">商家入驻</a>
          <a href="#">美团公益</a>
        </div>
      </div>
    </div>

    <!-- 主体区域 -->
    <div class="bodyer">
      <div class="bodyer-center">
        <!-- 全部分类 -->
        <div class="bodyer-center-left">
          <span>全部分类</span>
          <ul id="dropright"></ul>
        </div>
        <!-- 热区 -->
        <div class="bodyer-center-center">
          <div id="bodyer-center" class="bodyer-center-center-bottom">
            <!-- 轮播图 -->
            <div id="carousel">
              <a href="" id="links">
                <img src="" alt="加载中" id="image" />
              </a>
              <div id="left">&lt;</div>
              <div id="right">&gt;</div>
              <div id="number">
                <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
            </div>
            <div class="ad leisure"></div>
            <div class="ad hotel"></div>
            <div class="ad topover"></div>
            <div class="ad shopping"></div>
          </div>
        </div>
        <!-- 账户 -->
        <div class="bodyer-center-right">
          <!--登录后-->
          <!-- <div class="bodyer-center-right-top">
            <img src="./images/avatar.jpg" />
            <p>bkf</p>
            <div class="bodyer-center-right-top-list">
              <a href="#" class="bodyer-center-right-top-item">
                <i class="iconfont icon-dingdan"></i>
                我的订单
              </a>

              <a href="#" class="bodyer-center-right-top-item">
                <i class="iconfont icon-jiaxingshoucangtianchong"></i>
                我的收藏
              </a>

              <a href="#" class="bodyer-center-right-top-item">
                <i class="iconfont icon-youhuiquan01"></i>
                抵用券
              </a>

              <a href="#" class="bodyer-center-right-top-item">
                <i class="iconfont icon-zhifu-yue"></i>
                余额
              </a>

              <a href="#" class="bodyer-center-right-top-item">
                <i class="iconfont icon-gengduotianchong"></i>
                更多
              </a>
            </div>
          </div> -->
          <!-- 登录注册 -->
          <div class="bodyer-center-right-top">
            <div></div>
            <p>
              Hi!你好
            </p>
            <div>
              <a href="./view/register.html">注册</a>
            </div>
            <div>
              <a href="./view/login.html">立即登录</a>
            </div>
          </div>
          <!-- 二维码和介绍 -->
          <div class="bodyer-center-right-bottom">
            <div></div>
            <p>美团APP手机版</p>
            <span>一元起</span>
            <span>吃喝玩乐</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 猫眼电影 -->
    <div class="movie">
      <div class="movie-center">
        <!-- 电影介绍 -->
        <div class="movie-center-top">
          <div class="movie-center-top-one">
            <ul id="movie-tab">
              <li>猫眼电影</li>
              <li>
                正在热映
                <div class="triangle"></div>
              </li>
              <li>
                即将上映
                <div class="triangle displaynone"></div>
              </li>
            </ul>
            <a href="https://maoyan.com/?utm_source=meituanweb" target="_blank"
              >全部&gt;</a
            >
          </div>
          <div id="movie-show">
            <button id="movieleft">&lt;</button>
            <button id="movieright">&gt;</button>
            <div class="moviehot" style="display: block" id="nowhot"></div>
            <div class="moviehot" style="display: none" id="quick">
            </div>
        </div>
      </div>
    </div>

    <!-- 推荐民宿-->
    <div class="hotel">
      <div id="hotel" class="hotel-center">
        <!-- 民宿列表 -->
        <div class="hotel-center-top">
          <div>推荐民宿</div>
          <ul id="hotel-tab"></ul>
        </div>
        <!-- 民宿详情 -->
        <div class="hotel-center-bottom">
           <div id="container" ></div> 
        </div>
      </div>
    </div>

    <!-- 副导航-->
    <div class="navbar">
      <div class="navbar-center">
        <div class="navbar-center-top">美团导航</div>
        <div class="navbar-center-bottom" id="navbar"></div>
      </div>
    </div>
    <!-- 底部链接-->
    <div class="footer">
      <div class="footer-center">
        <div class="footer-center-content">
          <ul id="footer_list"></ul>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-bottom-left" id="footer_bottom_left">
          <span>&copy;2023 美团版权所有</span></div>
        <div class="footer-bottom-right">
          <a class="footer-bottom-right-top">
            <img class="beianicon" src="./images/beian.png" />
            京公网安备 11000002002052号
          </a>
          <div class="footer-bottom-right-bottom">
            <a
              class="beian-record"
              href="https://beian.miit.gov.cn/?spm=a21bo.21814703.1997523009.40.5af911d9saMbGy#/Integrated/index"
              title="备案信息"
              target="_blank"
            ></a>
            <a
              class="beian-12315"
              href="http://www.12315.cn/"
              title="12315消费争议"
              target="_blank"
            ></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
